<template>
  <view class="content">
    <view class="content-header">
      <image src="https://small.qaqavr.com/img/zhongrui/bg.png" mode=""></image>
      <view class="swiper"><image style="width: 100%; height: 100%;" src="https://small.qaqavr.com/img/zhongrui/girl.png" mode=""></image></view>
    </view>
    <!-- 新闻区域 -->
    <view class="kefubody">
      <view class="list" @click="open(item.id)" v-for="(item, index) in questionList" :key="index">
        <view style=" display: flex; align-items: center;margin: 10rpx 0;  padding: 10rpx ; font-size: 28rpx;font-weight: bold;">
          <image  src="https://small.qaqavr.com/img/zhongrui/quest.png" style="width: 50rpx; height: 50rpx; margin-right: 10rpx;" mode=""></image>
          <view
            style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
          >
            {{ item.questionContent }}
          </view>
          <view class="jiantousty" :class="{ active: item.zhankai == true }"></view>
        </view>

        <view v-if="item.zhankai" style="font-size: 24rpx; margin: 15rpx 0;  padding: 10rpx ;">{{ item.answerContent }}</view>
      </view>
    </view>
    <u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      dataChange: {
        pageIndex: 1,
        pageSize: 20
      },
      questionList: [],
      status: 'loadmore',
      loadingText: '加载中',
      loadmoreText: '上拉加载',
      nomoreText: '暂无更多'
    };
  },
  onLoad() {
    this.getNewsList();
  },
  onReachBottom() {
    console.log(123);
    this.status = 'loading';
    this.dataChange.pageSize = this.dataChange.pageSize + 5;
    this.getNewsList();
  },
  methods: {
    open(v) {
      this.questionList.forEach(item => {
        if (item.id === v) {
          item.zhankai = !item.zhankai;
        }
      });
    },
    // 获取问题列表
    async getNewsList() {
      const { data } = await uni.$http.post('/parameter/findFAQPage', this.dataChange);
      if (data.statusCode !== 200) {
        return;
      } else {
        data.data.data.forEach(item => {
          this.questionList.push({
            id: item.id,
            answerContent: item.answerContent,
            questionContent: item.questionContent,
            zhankai: false
          });
        });

        console.log('我是新闻列表===>', this.questionList);
        if (this.questionList.length === data.data.total) {
          return (this.status = 'nomore');
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  // height: 100%;
  background-color: #f2f2f2;

  .content-header {
    position: relative;
    height: 500rpx;
    image {
      width: 100%;
      height: 350rpx;
    }
    .swiper {
      position: absolute;
      top: 100rpx;
      left: 0;
      width: 100%;
      box-sizing: border-box;
      height: 350rpx;
      padding: 0 20rpx;
    }
  }
  .kefubody {
    padding: 0 20rpx;

    .list {
      // height: 80rpx;
      background-color: #ffffff;
      border-radius: 20rpx;
      box-sizing: border-box;
      display: flex;
      margin: 10rpx 0;
      padding: 0 10rpx;
      flex-direction: column;
      justify-content: space-between;

      view {
        .active {
          transform: rotate(-180deg) !important;
        }

        .jiantousty {
          display: inline-block;
          width: 25rpx;
          height: 12rpx;
          transform: rotate(0);
          background: url(https://small.qaqavr.com/img/zhongrui/down.png) no-repeat;
          background-size: contain;
        }
      }
    }
  }
}
</style>
